<template>
  <view class="input-area" :style="{ bottom: keyboardHeight + 'px' }">
    <!-- 当前话题显示在输入框上方 -->
    <view class="input-topic" v-if="currentTopic">
      <FeatherIcon name="hash" size="16" color="#1890ff" />
      <text>当前话题: {{ currentTopic }}</text>
      <view class="topic-actions">
        <view class="topic-action-btn" @tap="quoteTopic">
          <FeatherIcon name="message-square" size="14" color="#1890ff" />
        </view>
        <view class="topic-action-btn" @tap="showTopicModal">
          <FeatherIcon name="edit" size="14" color="#1890ff" />
        </view>
      </view>
    </view>

    <!-- 引用提示 -->
    <view class="quote-indicator" v-if="showQuoteIndicator">
      <text class="quote-text">引用: @{{ quotedUser }}</text>
      <view class="quote-cancel" @tap="cancelQuote">
        <FeatherIcon name="x" size="16" color="#999" />
      </view>
    </view>

    <!-- 输入区域部分 -->
    <view class="input-wrapper">
      <view class="emoji-btn" @click="toggleEmojiPanel">
        <FeatherIcon
          :name="showEmojiPanel ? 'x-circle' : 'smile'"
          size="24"
          color="#666"
        />
      </view>

      <input
        class="message-input"
        type="text"
        v-model="localContent"
        placeholder="说点什么..."
        confirm-type="send"
        :disabled="isDisabled"
        @confirm="onSendMessage"
        @focus="handleInputFocus"
        @blur="handleInputBlur"
        :adjust-position="false"
      />

      <view
        class="action-btn"
        @click="localContent.trim() ? onSendMessage() : toggleMorePanel()"
      >
        <FeatherIcon
          :name="localContent.trim() ? 'send' : 'plus'"
          size="24"
          :color="localContent.trim() ? '#fff' : '#fff'"
        />
      </view>
    </view>

    <!-- 功能面板 -->
    <view class="more-panel" v-if="showMorePanel">
      <view class="more-item" @click="chooseImage">
        <view class="more-icon">
          <FeatherIcon name="image" size="28" color="#666" />
        </view>
        <text class="more-text">相册</text>
      </view>
      <view class="more-item" @click="takePhoto">
        <view class="more-icon">
          <FeatherIcon name="camera" size="28" color="#666" />
        </view>
        <text class="more-text">拍摄</text>
      </view>
      <view class="more-item" @click="openTail">
        <view class="more-icon">
          <FeatherIcon name="feather" size="28" color="#666" />
        </view>
        <text class="more-text">小尾巴</text>
      </view>
      <view class="more-item" @click="openRedPacket">
        <view class="more-icon">
          <FeatherIcon name="gift" size="28" color="#ff4d4f" />
        </view>
        <text class="more-text">红包</text>
      </view>
      <view class="more-item" @click="showBarragerModal">
        <view class="more-icon">
          <FeatherIcon name="message-circle" size="28" color="#1890ff" />
        </view>
        <text class="more-text">发弹幕</text>
      </view>
      <view class="more-item" @click="showTopicModal">
        <view class="more-icon">
          <FeatherIcon name="hash" size="28" color="#1890ff" />
        </view>
        <text class="more-text">修改话题</text>
      </view>
    </view>

    <!-- 表情面板 -->
    <EmojiPanel
      v-if="showEmojiPanel"
      @select-emoji="insertEmoji"
      @add-custom-emoji="addCustomEmoji"
    />

    <!-- 自定义修改话题弹窗 -->
    <view
      class="custom-modal"
      v-if="showTopicModalFlag"
      @touchmove.stop.prevent
    >
      <view class="custom-modal-mask" @click="closeTopicModal"></view>
      <view class="custom-modal-content">
        <view class="custom-modal-header">修改讨论话题</view>
        <view class="custom-modal-body">
          <input
            class="custom-modal-input"
            v-model="newTopic"
            placeholder="请输入新话题"
            maxlength="16"
          />
          <view class="custom-modal-tip"
            >修改话题需要16积分，将自动从账户中扣除；<br />最大长度16字符，不合法字符将被自动过滤。</view
          >
        </view>
        <view class="custom-modal-footer">
          <view class="custom-modal-btn cancel-btn" @click="closeTopicModal"
            >取消</view
          >
          <view class="custom-modal-btn confirm-btn" @click="changeTopic"
            >确定</view
          >
        </view>
      </view>
    </view>

    <!-- 发送弹幕弹窗 -->
    <view
      class="custom-modal"
      v-if="showBarragerModalFlag"
      @touchmove.stop.prevent
    >
      <view class="custom-modal-mask" @click="closeBarragerModal"></view>
      <view class="custom-modal-content">
        <view class="custom-modal-header">发送弹幕</view>
        <view class="custom-modal-body">
          <input
            class="custom-modal-input"
            v-model="barragerContent"
            placeholder="友善弹幕，最多32个字哦"
            maxlength="32"
          />
          <!-- 弹幕颜色选择 -->
          <view class="barrager-colors">
            <view class="color-label">选择颜色：</view>
            <view class="color-options">
              <view
                v-for="(color, index) in barragerColors"
                :key="index"
                class="color-item"
                :style="{ backgroundColor: color }"
                :class="{ active: selectedColorIndex === index }"
                @click="selectColor(index)"
              ></view>
            </view>
          </view>
          <view class="custom-modal-tip"
            >发送弹幕每次将花费 5 积分，将自动从账户中扣除</view
          >
        </view>
        <view class="custom-modal-footer">
          <view class="custom-modal-btn cancel-btn" @click="closeBarragerModal"
            >取消</view
          >
          <view class="custom-modal-btn confirm-btn" @click="sendBarrager"
            >发射!</view
          >
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, watch, nextTick } from "vue";
import FeatherIcon from "@/components/FeatherIcon.vue";
import EmojiPanel from "./EmojiPanel.vue";
import {
  showLoading,
  showError,
  hideLoading,
  showSuccess,
} from "@/utils/common.js";
import api from "@/api";

const props = defineProps({
  content: {
    type: String,
    default: "",
  },
  currentTopic: {
    type: String,
    default: "",
  },
  isDisabled: {
    type: Boolean,
    default: false,
  },
  quoteData: {
    type: Object,
    default: null,
  },
  keyboardHeight: {
    type: Number,
    default: 0,
  },
});

const emit = defineEmits([
  "update:content",
  "send-message",
  "open-red-packet",
  "open-tail",
  "cancel-quote",
  "scroll-to-bottom",
  "panel-height-change",
]);

// 本地状态
const localContent = ref(props.content);
const showEmojiPanel = ref(false);
const showMorePanel = ref(false);
const showTopicModalFlag = ref(false);
const showBarragerModalFlag = ref(false);
const newTopic = ref("");
const barragerContent = ref("");
const selectedColorIndex = ref(0);
const barragerColors = ref([
  "rgba(255, 255, 255, 0.85)", // 白色
  "rgba(255, 0, 0, 0.85)", // 红色
  "rgba(0, 255, 0, 0.85)", // 绿色
  "rgba(0, 0, 255, 0.85)", // 蓝色
  "rgba(255, 255, 0, 0.85)", // 黄色
  "rgba(255, 0, 255, 0.85)", // 紫色
  "rgba(0, 255, 255, 0.85)", // 青色
  "rgba(255, 165, 0, 0.85)", // 橙色
  "rgba(255, 192, 203, 0.85)", // 粉色
]);

// 监听内容变化
watch(
  () => props.content,
  (newVal) => {
    localContent.value = newVal;
  }
);

// 监听本地内容变化，同步到父组件
watch(localContent, (newVal) => {
  emit("update:content", newVal);
});

// 引用相关
const showQuoteIndicator = computed(() => {
  return props.quoteData !== null;
});

const quotedUser = computed(() => {
  return props.quoteData?.userName || "";
});

// 取消引用
const cancelQuote = () => {
  emit("cancel-quote");
};

// 引用当前话题
const quoteTopic = () => {
  if (props.currentTopic) {
    localContent.value += ` *\`# ${props.currentTopic} #\`* `;
    handleInputFocus();

    // 立即滚动到底部
    emit("scroll-to-bottom");
  }
};

// 显示修改话题弹窗
const showTopicModal = () => {
  newTopic.value = props.currentTopic || "";
  showTopicModalFlag.value = true;
};

// 关闭话题弹窗
const closeTopicModal = () => {
  showTopicModalFlag.value = false;
  newTopic.value = "";
};

// 显示弹幕弹窗
const showBarragerModal = () => {
  barragerContent.value = "";
  selectedColorIndex.value = 0;
  showBarragerModalFlag.value = true;
  showMorePanel.value = false;
  emit("panel-height-change", 0);
};

// 关闭弹幕弹窗
const closeBarragerModal = () => {
  showBarragerModalFlag.value = false;
  barragerContent.value = "";
  emit("panel-height-change", 0);
};

// 发送弹幕
const sendBarrager = () => {
  if (!barragerContent.value || barragerContent.value.trim() === "") {
    showError("弹幕内容不能为空");
    return;
  }

  // 长度限制
  if (barragerContent.value.length > 32) {
    showError("弹幕最多32个字");
    return;
  }

  // 构造弹幕消息
  const barragerData = {
    color: barragerColors.value[selectedColorIndex.value],
    content: barragerContent.value,
  };
  const barragerMessage = `[barrager]${JSON.stringify(
    barragerData
  )}[/barrager]`;

  // 发送弹幕消息
  emit("send-message", barragerMessage);

  // 关闭弹窗
  closeBarragerModal();

  // 显示发送成功提示
  showSuccess("弹幕已发射！");

  // 立即滚动到底部
  emit("scroll-to-bottom");

  // 在APP或H5环境中尝试恢复输入框焦点
  // #ifdef APP-PLUS || H5
  setTimeout(() => {
    const query = uni.createSelectorQuery();
    query
      .select(".message-input")
      .node((res) => {
        if (res && res.node) {
          res.node.focus();
          console.log("弹幕发送后，重新聚焦输入框成功");
        }
      })
      .exec();
  }, 100);
  // #endif
};

// 提交修改话题
const changeTopic = () => {
  if (!newTopic.value || newTopic.value.trim() === "") {
    showError("话题不能为空");
    return;
  }

  // 长度限制
  if (newTopic.value.length > 16) {
    showError("话题最长16个字符");
    return;
  }

  // 发送修改话题的消息
  const topicMessage = `[setdiscuss]${newTopic.value}[/setdiscuss]`;
  emit("send-message", topicMessage);

  // 关闭弹窗
  closeTopicModal();

  // 立即滚动到底部
  emit("scroll-to-bottom");

  // 在APP或H5环境中尝试恢复输入框焦点
  // #ifdef APP-PLUS || H5
  setTimeout(() => {
    const query = uni.createSelectorQuery();
    query
      .select(".message-input")
      .node((res) => {
        if (res && res.node) {
          res.node.focus();
          console.log("修改话题后，重新聚焦输入框成功");
        }
      })
      .exec();
  }, 100);
  // #endif
};

// 处理输入框聚焦
const handleInputFocus = () => {
  console.log("输入框聚焦，检查面板状态", {
    showEmojiPanel: showEmojiPanel.value,
    showMorePanel: showMorePanel.value,
  });

  // 保存面板状态以便调试
  const hadEmojiPanel = showEmojiPanel.value;
  const hadMorePanel = showMorePanel.value;

  // 在关闭面板前先发送高度变化为0，防止突然的高度变化
  if (showEmojiPanel.value || showMorePanel.value) {
    console.log("输入框聚焦前先重置面板高度");
    emit("panel-height-change", 0);
  }

  // 输入框聚焦时关闭所有面板
  showEmojiPanel.value = false;
  showMorePanel.value = false;

  console.log("输入框聚焦，触发滚动到底部，面板状态变化:", {
    之前表情面板: hadEmojiPanel,
    之前功能面板: hadMorePanel,
    现在表情面板: showEmojiPanel.value,
    现在功能面板: showMorePanel.value,
  });

  // 立即滚动到底部
  emit("scroll-to-bottom");
};

// 处理输入框失焦
const handleInputBlur = () => {
  console.log("输入框失焦，触发滚动到底部");
  // 立即滚动到底部
  emit("scroll-to-bottom");
};

// 发送消息
const onSendMessage = () => {
  if (localContent.value.trim()) {
    // 发送消息
    emit("send-message", localContent.value);
    localContent.value = ""; // 发送后清空内容

    // 关闭所有面板
    showEmojiPanel.value = false;
    showMorePanel.value = false;

    // 重置面板高度
    emit("panel-height-change", 0);

    console.log("发送消息后，触发滚动到底部，关闭所有面板");

    // 立即滚动到底部
    emit("scroll-to-bottom");

    // 使用uni-app的方法设置焦点，而不是DOM API
    // #ifdef APP-PLUS || H5
    // 这部分代码只在APP或H5环境中运行
    setTimeout(() => {
      // 使用微信小程序的方式获取组件并设置焦点
      const query = uni.createSelectorQuery();
      query
        .select(".message-input")
        .node((res) => {
          if (res && res.node) {
            res.node.focus();
            console.log("重新聚焦输入框成功");
          }
        })
        .exec();
    }, 100);
    // #endif
  }
};

// 切换表情面板
const toggleEmojiPanel = () => {
  console.log("切换表情面板前状态:", {
    showEmojiPanel: showEmojiPanel.value,
    showMorePanel: showMorePanel.value,
  });

  // 如果当前显示的是功能面板，先将其关闭并重置高度
  if (showMorePanel.value) {
    console.log("先关闭功能面板再切换表情面板");
    // 先发送高度为0，避免高度突变
    emit("panel-height-change", 0);
    showMorePanel.value = false;

    // 给一个小延迟再显示表情面板，让界面有时间处理高度变化
    setTimeout(() => {
      showEmojiPanel.value = !showEmojiPanel.value;

      if (showEmojiPanel.value) {
        emit("panel-height-change", 250);
      } else {
        emit("panel-height-change", 0);
      }

      console.log("延迟后切换表情面板，当前状态:", {
        showEmojiPanel: showEmojiPanel.value,
        面板高度: showEmojiPanel.value ? 250 : 0,
      });

      // 立即滚动到底部
      emit("scroll-to-bottom");
    }, 50);

    return;
  }

  // 正常切换表情面板
  showEmojiPanel.value = !showEmojiPanel.value;

  if (showEmojiPanel.value) {
    showMorePanel.value = false;

    // 当打开表情面板时，显式触发一个面板高度事件
    // 使用布局调整事件告知父组件有面板显示
    emit("panel-height-change", 250); // 表情面板高度
  } else {
    // 当关闭表情面板时，恢复默认高度
    emit("panel-height-change", 0);
  }

  console.log("切换表情面板后状态:", {
    showEmojiPanel: showEmojiPanel.value,
    面板高度: showEmojiPanel.value ? 250 : 0,
  });

  // 立即滚动到底部
  emit("scroll-to-bottom");
};

// 切换功能面板
const toggleMorePanel = () => {
  console.log("切换功能面板前状态:", {
    showEmojiPanel: showEmojiPanel.value,
    showMorePanel: showMorePanel.value,
  });

  // 如果当前显示的是表情面板，先将其关闭并重置高度
  if (showEmojiPanel.value) {
    console.log("先关闭表情面板再切换功能面板");
    // 先发送高度为0，避免高度突变
    emit("panel-height-change", 0);
    showEmojiPanel.value = false;

    // 给一个小延迟再显示功能面板，让界面有时间处理高度变化
    setTimeout(() => {
      showMorePanel.value = !showMorePanel.value;

      if (showMorePanel.value) {
        emit("panel-height-change", 200);
      } else {
        emit("panel-height-change", 0);
      }

      console.log("延迟后切换功能面板，当前状态:", {
        showMorePanel: showMorePanel.value,
        面板高度: showMorePanel.value ? 200 : 0,
      });

      // 立即滚动到底部
      emit("scroll-to-bottom");
    }, 50);

    return;
  }

  // 正常切换功能面板
  showMorePanel.value = !showMorePanel.value;

  if (showMorePanel.value) {
    showEmojiPanel.value = false;

    // 当打开功能面板时，显式触发一个面板高度事件
    // 使用布局调整事件告知父组件有面板显示
    emit("panel-height-change", 200); // 功能面板高度
  } else {
    // 当关闭功能面板时，恢复默认高度
    emit("panel-height-change", 0);
  }

  console.log("切换功能面板后状态:", {
    showMorePanel: showMorePanel.value,
    面板高度: showMorePanel.value ? 200 : 0,
  });

  // 立即滚动到底部
  emit("scroll-to-bottom");
};

// 插入表情
const insertEmoji = (emoji) => {
  // 检查是否是图片URL（自定义表情）
  const isImg = isImageUrl(emoji);

  if (isImg) {
    // 自定义表情直接发送
    localContent.value = `<img src="${emoji}" alt="图片表情">`;
    // 立即发送消息并关闭表情面板
    emit("send-message", localContent.value);
    localContent.value = ""; // 发送后清空内容

    // 关闭表情面板
    showEmojiPanel.value = false;

    // 重置面板高度
    emit("panel-height-change", 0);
  } else {
    // 普通emoji表情只插入不发送
    localContent.value += emoji;
    // 不关闭表情面板
  }

  // 立即滚动到底部
  emit("scroll-to-bottom");
};

// 判断是否为图片URL
const isImageUrl = (emoji) => {
  if (!emoji || typeof emoji !== "string") return false;
  return (
    emoji.startsWith("http") &&
    (emoji.endsWith(".png") ||
      emoji.endsWith(".jpg") ||
      emoji.endsWith(".jpeg") ||
      emoji.endsWith(".gif") ||
      emoji.endsWith(".webp") ||
      emoji.includes(".png?") ||
      emoji.includes(".jpg?") ||
      emoji.includes(".jpeg?") ||
      emoji.includes(".gif?") ||
      emoji.includes(".webp?"))
  );
};

// 选择图片
const chooseImage = () => {
  // 关闭功能面板
  showMorePanel.value = false;
  // 重置面板高度
  emit("panel-height-change", 0);

  uni.chooseImage({
    count: 1,
    sizeType: ["compressed"],
    sourceType: ["album"],
    success: async (res) => {
      try {
        showLoading("上传中...");
        const tempFilePath = res.tempFilePaths[0];

        // 上传图片
        const uploadResult = await api.user.uploadImage(tempFilePath);

        if (uploadResult.code === 0) {
          // 获取上传成功的图片URL
          const fileName = tempFilePath.split("/").pop();
          const imageUrl =
            uploadResult.data.succMap[fileName] ||
            uploadResult.data.fileUrl ||
            uploadResult.data.url;

          if (!imageUrl) {
            throw new Error("未获取到图片URL");
          }

          // 发送图片消息
          emit("send-message", `<img src="${imageUrl}" alt="图片">`);

          // 立即滚动到底部
          emit("scroll-to-bottom");

          // 在APP或H5环境中尝试恢复输入框焦点
          // #ifdef APP-PLUS || H5
          setTimeout(() => {
            const query = uni.createSelectorQuery();
            query
              .select(".message-input")
              .node((res) => {
                if (res && res.node) {
                  res.node.focus();
                  console.log("选择图片后，重新聚焦输入框成功");
                }
              })
              .exec();
          }, 100);
          // #endif
        } else {
          showError(uploadResult.msg || "上传失败");
        }
      } catch (error) {
        console.error("上传图片失败:", error);
        showError(error.message || "上传失败");
      } finally {
        hideLoading();
      }
    },
  });
};

// 拍照
const takePhoto = () => {
  // 关闭功能面板
  showMorePanel.value = false;
  // 重置面板高度
  emit("panel-height-change", 0);

  uni.chooseImage({
    count: 1,
    sizeType: ["compressed"],
    sourceType: ["camera"],
    success: async (res) => {
      try {
        showLoading("上传中...");
        const tempFilePath = res.tempFilePaths[0];
        // 上传图片
        const uploadResult = await api.user.uploadImage(tempFilePath);
        if (uploadResult.code === 0) {
          // 获取上传成功的图片URL
          const fileName = tempFilePath.split("/").pop();
          const imageUrl =
            uploadResult.data.succMap[fileName] ||
            uploadResult.data.fileUrl ||
            uploadResult.data.url;

          if (!imageUrl) {
            throw new Error("未获取到图片URL");
          }

          // 发送图片消息
          emit("send-message", `<img src="${imageUrl}" alt="图片">`);

          // 立即滚动到底部
          emit("scroll-to-bottom");

          // 在APP或H5环境中尝试恢复输入框焦点
          // #ifdef APP-PLUS || H5
          setTimeout(() => {
            const query = uni.createSelectorQuery();
            query
              .select(".message-input")
              .node((res) => {
                if (res && res.node) {
                  res.node.focus();
                  console.log("拍照后，重新聚焦输入框成功");
                }
              })
              .exec();
          }, 100);
          // #endif
        } else {
          showError(uploadResult.msg || "上传失败");
        }
      } catch (error) {
        console.error("上传图片失败:", error);
        showError(error.message || "上传失败");
      } finally {
        hideLoading();
      }
    },
  });
};

// 打开小尾巴设置
const openTail = () => {
  emit("open-tail");
  showMorePanel.value = false;
  // 重置面板高度
  emit("panel-height-change", 0);
};

// 打开红包功能
const openRedPacket = () => {
  emit("open-red-packet");
  showMorePanel.value = false;
  // 重置面板高度
  emit("panel-height-change", 0);
};

// 添加自定义表情
const addCustomEmoji = async (newEmoji) => {
  showMorePanel.value = false;
  showEmojiPanel.value = false;
  // 重置面板高度
  emit("panel-height-change", 0);
};

// 选择颜色
const selectColor = (index) => {
  selectedColorIndex.value = index;
  // 重置面板高度
  emit("panel-height-change", 0);
};
</script>

<style lang="scss" scoped>
.input-area {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  z-index: 100;
  box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.03);

  /* 输入框上方的话题 */
  .input-topic {
    padding: 12rpx 20rpx;
    margin-bottom: 15rpx;
    font-size: 24rpx;
    color: #1890ff;
    background-color: #f0f9ff;
    border-radius: 8rpx;
    display: flex;
    align-items: center;

    :deep(FeatherIcon) {
      margin-right: 6rpx;
      flex-shrink: 0;
    }

    text {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .topic-actions {
      display: flex;
      margin-left: 10rpx;
    }

    .topic-action-btn {
      width: 40rpx;
      height: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 10rpx;

      &:active {
        opacity: 0.7;
      }
    }
  }

  /* 引用指示器 */
  .quote-indicator {
    background-color: #f0f9ff;
    color: #1890ff;
    font-size: 24rpx;
    padding: 12rpx 20rpx;
    margin-bottom: 12rpx;
    border-radius: 8rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .quote-text {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .quote-cancel {
    padding: 6rpx;
    margin-left: 10rpx;
  }

  /* 输入区域样式 */
  .input-wrapper {
    display: flex;
    align-items: center;
  }

  .emoji-btn {
    width: 70rpx;
    height: 70rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 10rpx;
  }

  .message-input {
    flex: 1;
    height: 80rpx;
    background-color: #f5f5f5;
    border-radius: 40rpx;
    padding: 0 30rpx;
    font-size: 28rpx;
    color: #333;
  }

  .action-btn {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 20rpx;
    background-color: #f5f5f5;
    transition: all 0.3s;
  }

  .action-btn:active {
    opacity: 0.8;
  }

  /* 输入框有内容时的发送按钮样式 */
  input:not(:placeholder-shown) + .action-btn,
  .message-input:not(:placeholder-shown) ~ .action-btn {
    background-color: #007aff !important;
  }

  /* 功能面板样式 */
  .more-panel {
    display: flex;
    flex-wrap: wrap;
    padding: 30rpx 20rpx;
    margin-top: 20rpx;
    background-color: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    height: 350rpx; /* 固定高度 */
    box-sizing: border-box;
    overflow: hidden;
    transform-origin: bottom;
    transition: all 0.3s;
  }

  .more-item {
    width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30rpx;
  }

  .more-icon {
    width: 100rpx;
    height: 100rpx;
    border-radius: 20rpx;
    background-color: #f5f5f5;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10rpx;
  }

  .more-text {
    font-size: 24rpx;
    color: #666;
  }

  /* 表情面板样式 */
  :deep(.emoji-panel) {
    height: 420rpx; /* 固定高度 */
    overflow: hidden;
    transition: all 0.3s;
  }

  /* 自定义弹窗样式 */
  .custom-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .custom-modal-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
  }

  .custom-modal-content {
    position: relative;
    width: 80%;
    max-width: 600rpx;
    background-color: #fff;
    border-radius: 20rpx;
    overflow: hidden;
    z-index: 1001;
    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
  }

  .custom-modal-header {
    padding: 30rpx;
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
  }

  .custom-modal-body {
    padding: 30rpx;
  }

  .custom-modal-input {
    height: 80rpx;
    border: 1px solid #e0e0e0;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    margin-bottom: 20rpx;
    width: 100%;
    box-sizing: border-box;
  }

  .custom-modal-tip {
    font-size: 24rpx;
    color: #999;
    line-height: 1.5;
  }

  .custom-modal-footer {
    display: flex;
    border-top: 1px solid #f0f0f0;
  }

  .custom-modal-btn {
    flex: 1;
    height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30rpx;
    transition: all 0.3s;
  }

  .cancel-btn {
    color: #666;
    border-right: 1px solid #f0f0f0;

    &:active {
      background-color: #f5f5f5;
    }
  }

  .confirm-btn {
    color: #007aff;
    font-weight: bold;

    &:active {
      background-color: #f0f9ff;
    }
  }

  /* 弹幕颜色选择样式 */
  .barrager-colors {
    margin: 20rpx 0;
  }

  .color-label {
    font-size: 24rpx;
    color: #666;
    margin-bottom: 10rpx;
  }

  .color-options {
    display: flex;
    flex-wrap: wrap;
  }

  .color-item {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    margin-right: 15rpx;
    margin-bottom: 10rpx;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);

    &.active {
      transform: scale(1.2);
      border: 2rpx solid #007aff;
      box-shadow: 0 0 8rpx rgba(0, 122, 255, 0.6);
    }
  }
}
</style>
